Component({
  properties: {
      //是否显示滑块
      showBar: {
          type: Boolean,
          value: true
      },
      //是否可以滚动
      scrollX: {
          type: Boolean,
          value: true
      },
      icon:{
        type: Boolean,
        value: false
      },
      // item padding值,rpx值
      padding: {
          type: Number,
          value: 30
      },
      //列表行高,rpx值
      heightLine: {
          type: Number,
          value: 80
      },
      // 滑块颜色
      lineColor: {
          type: String,
          value: "#57B127"
      },
      // 当前激活滑块的index
      current: {
          type: Number,
          value: 0,
          observer: "change_current"
      },
      // 字体大小(传的是rpx单位)
      fontSize: {
          type: Number,
          value: 30
      },
      //选中的时的字体大小,rpx单位
      activeFontSize: {
          type: Number,
          value: 38
      },
      //tabbar背景
      boxBg: {
          type: String,
          value: "#FFE048"
      },
      // 当前文本颜色
      activeCurrentColor: {
          type: String,
          value: "#000"
      },
      // 未激活文本颜色
      currentColor: {
          type: String,
          value: "#666"
      },
      name: {
        type: String,
        value: "name"
    },
      tabs: {
          type: Array,
          value: [ ],
      },
  },
  //scroll-view为滚动容器的样式，tab-item'为item的样式，
  externalClasses: [],
  /**
   * 页面的初始数据
   */
  data: {
      width: '40',
      offset: 0,
      scrollLeft: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  lifetimes: {
      attached() {
        setTimeout(()=>{
            this.get_tab();
          },200)
      }
  },
  onReady(){

  },
  methods: {
      //监听当前滑块
      change_current(newVal) {
          let that = this;
          that.setData({
              current: newVal
          })
      },
      //tabItem
      get_tab() {
          let that = this;
          let query = wx.createSelectorQuery().in(that);
          query.select('.scroll-tab').fields({
              scrollOffset:true
          })
          query.select(".active-tab,").boundingClientRect().exec(res => {
              if(res[1] == null){
                this.get_tab()
                return false
              }
              let offsetLeft = res[0].scrollLeft
              // let width = res[1].width;
              let left = res[1].left+ (res[1].width-40)/2
              // let scrollLeft = res[0].left
              that.setData({
                  // width,
                  offset:offsetLeft+left
              },()=>{
                  that.scrollByIndex();
              })
          });
      },

      //点击选中样式，横线距离计算
      selectTab: function (e) {
          let that = this;
          that.setData({
              current: e.currentTarget.dataset.index,
          },
              () => {
                  that.get_tab();
              }
          );
          var id =e.currentTarget.dataset.id
          this.triggerEvent('myevent', e.currentTarget.dataset.index) 
      },

      //滚动容器移动
      scrollByIndex(){
          let that = this;
          let {offset} =that.data;
          var screenWidth = wx.getSystemInfoSync().windowWidth;
          var large2 = offset + 100;
          if (large2 >= screenWidth) {
              that.setData({
                  scrollLeft: large2 / 2
              })
          } else {
              that.setData({
                  scrollLeft: 0
              })
          }
      },

      //swiper滑动切换
      changeSwiper: function (e) {
          let that = this;
          that.setData({
              current: e.detail.current,
          })

          var large = that.data.current * that.data.width;
          that.setData({
              offset: large,
              // scrollLeft: large / 3
          })
          var screenWidth = wx.getSystemInfoSync().windowWidth;
          var large2 = (that.data.current + 2) * that.data.width;
          if (large2 >= screenWidth) {
              that.setData({
                  scrollLeft: large2 / 2
              })
          } else {
              that.setData({
                  scrollLeft: 0
              })
          }
      },
  },


})